<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/web/head.jsp"%>
</head>
<body>
	<div class="layui-row">
		<div class="layui-col-md10">
			<div class="layui-card" style="height: 140px;">
				<div class="layui-card-header">作品查询</div>
				<div class="layui-card-body" style="margin-top: 20px;">
					<form class="layui-form">
						<div class="layui-form-item">
							<!-- 题目 -->
							<div class="layui-inline">
								<label class="layui-form-label">题目</label>
								<div class="layui-input-inline" style="width: 150px;">
									<input type="text" name="title" placeholder="请输入题目"
										autocomplete="off" class="layui-input">
								</div>
								<div class="layui-form-mid">作者</div>
								<div class="layui-input-inline" style="width: 150px;">
									<input type="text" name="author" placeholder="请输入作者"
										autocomplete="off" class="layui-input">
								</div>
								<div class="layui-form-mid">文章类型</div>
								<div class="layui-input-inline">
									<select name="type">
									</select>
								</div>
							</div>
							<div class="layui-inline">
								<input class="layui-btn ayui-btn-radius layui-btn-sm" lay-submit
									lay-filter="search" value="搜索" style="width: 50px;" /> <input
									type="reset"
									class="layui-btn ayui-btn-radius layui-btn-primary layui-btn-sm"
									value="重置" />
							</div>
						</div>
						<input type="hidden" name="pageIndex" value="1"><input
							type="hidden" name="pageLimit" value="8"> <input
							type="hidden" name="action" value="getCase">
					</form>
				</div>
			</div>
		</div>
		<div class="layui-col-md2" style="height: 150px;">
			<div class="layui-card" style="height: 140px;">
				<div class="layui-card-header">类型金额管理</div>
				<div class="layui-card-body" align="center"
					style="margin-top: 20px;">
					<input type="button" class="layui-btn layui-btn layui-btn"
						value="类型金额管理" />
				</div>
			</div>
		</div>
	</div>
	<!-- 	table -->
	<div style="margin-top: 0px;">
		<table class="layui-table">
			<thead>
				<tr>
					<th>序号</th>
					<th>题目</th>
					<th>类型</th>
					<th>作者</th>
					<th>稿费</th>
					<th>审稿费</th>
					<th>版面费</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		<div id="test1" style="text-align: right; padding-right: 30px;"></div>
	</div>

	<script type="text/javascript">
	
	function openType() {
		layerOpen('管理类型费用', '/web/manager/setCase.jsp', '800px',
				'640px', refresh)
	}
	
	ajax('/ArticleTypeServlet', 'json', {
		action : 'getAll'
	}, function(res) {
		var html = '<option value="">请选择类型 可输入</option>'
		$.each(res, function(i, dom) {
			html += '<option value="'+dom.name+'">' + dom.name + '</option>'
		})
		$('select[name="type"]').html(html)
		form.render('select')
	})
	
	formOnSubmit('search', 'json', '/ArticleServlet', function(data) {
		console.log(data)
			var curr = $('input[name="pageIndex"]').val()
			var limit = $('input[name="pageLimit"]').val()
			// 渲染
			laypage.render({
				elem : 'test1',
				count : data.count,
				layout : [ 'count', 'prev', 'page', 'next', 'limit', 'refresh',
						'skip' ],
				curr : curr,
				limit : limit,
				limits : [ 8, 10, 12, 20 ],
				jump : function(obj, first) {
					$('input[name="pageIndex"]').val(obj.curr)
					$('input[name="pageLimit"]').val(obj.limit)
					if (!first) {
						refresh();
					}
				}
			});
			// 显示
			var html = "";
			var tpl = $('#tradd').html();
			$.each(data.list, function(i, dom) {
				var d = {
					id : i + 1 + (curr - 1) * limit,
					account : dom.id,
					title : dom.title,
					author : dom.author,
					type : dom.type,
					article : dom.article == null?"<text style='color:red;'>未设置字数</text>":dom.article,
					check : dom.check== null?"<text style='color:red;'>该类别未设置</text>":dom.check,
					page : dom.page== null?"<text style='color:red;'>该类别未设置</text>":dom.page
				}
				html += laytpl(tpl).render(d)
			})
			$('tbody').html(html)
		})
	
	function refresh(){
		$('input[value="搜索"]').click()
	}
	

		function setNum(id) {
			layer.prompt(function(value, index, elem) {
				ajax('/ArticleServlet', 'text', {
					action:'addNum',
					wordNum : value,
					id : id
				}, function(res) {
					if(res=="success"){
						layer.msg("修改成功", {
						time : 1000,
						icon : 6
					})
					}else{
						layer.msg('修改失败',{time:1000})
					}
				})
				refresh
				layer.close(index);
			});
		}

		refresh();

		$('input[value="类型金额管理"]').click(openType);
	</script>
	<script type="text/html" id="tradd">
		<tr>
			<td>{{d.id}}</td>
			<td>{{d.title}}</td>
			<td>{{d.type}}</td>
			<td>{{d.author}}</td>
			<td>{{d.article}}</td>
			<td>{{d.check}}</td>
			<td>{{d.page}}</td>
			<td>
				<a href="javascript:setNum('{{d.account}}');" class="layui-btn layui-btn-sm">设置字数</a>
			</td>
		</tr>
</script>
</body>
</html>